<template>
	<view class="">
		<!-- 浏览记录 -->
		<view class="browse">
			<!-- 编辑按钮 -->
			<view class="browse_btn">
				<text v-if="btnSty" style="color: #999999;" @click="editBrowse">编辑</text>
				<text v-else style="color: #999999;" @click="editfinsh">完成</text>
			</view>
			<!-- 浏览记录的内容 -->
			<view class="browse_box" v-for="(item,index) in browselist" :key="index">
				<!-- 日期 -->
				<view class="browse_title">
					<view class="browse_time" >
						<!-- 单个全选按钮 -->
						<checkbox-group v-show="ishowchecked"  @change="selectAll(item.id)">
							<label><checkbox  value="" style="transform:scale(0.8)"  :checked="isAllCheck" /></label>
						</checkbox-group>
						<text>{{ item.nowData }}</text>
					</view>
					<view class=""></view>
				</view>
				<!-- 图片 -->
				<view class="browse_list public_sty">
					<view class="browse_rec" v-for="(item,i) in item.browserecList" :key="i">
						<view class="browse_rec_img">
							<!-- 单选按钮 -->
							<checkbox-group class="img_checkbox" v-show="ishowchecked" @change="changeitem(item)"  checked>
								<label><checkbox  value="" style="transform:scale(0.8)" :checked="item.checked" /></label>
							</checkbox-group>
							<image :src="item.image" mode=""></image>
						</view>
						<view class="browse_rec_text">
							<text>￥{{item.pic}}</text>
						</view>
					</view>
				</view>
				
			</view>
			
		</view>
		<view v-if="ishowchecked" class="browse_bottom" >
			<!-- 总控制的全选按钮 -->
			<view class="browse_choose">
				<checkbox-group   @change="selectAll">
					<label><checkbox value="" style="transform:scale(0.8)"  :checked="isAllCheckd" /></label>
				</checkbox-group>
				<text>全选</text>
			</view>
			<view class="browse_button">
				<button>删除</button>
			</view>
		</view>
	</view>
	
	
</template>

<script>
export default {
	data() {
		return {
			btnSty: true,
			isAllCheck:false,
			ishowchecked:false,
			browselist: [
				{
					nowData: '10月15日',
					id:0,
					checked: false,
					browserecList: [
						{
							image: '/static/uni.png',
							pic: 30.9
						},
						{
							image: '/static/uni.png',
							pic: 30.9
						},
						{
							image: '/static/uni.png',
							pic: 30.9
						},
						{
							image: '/static/uni.png',
							pic: 30.9
						},
						{
							image: '/static/uni.png',
							pic: 30.9
						},
						{
							image: '/static/uni.png',
							pic: 30.9
						}
					]
				},
				{
					nowData: '10月12日',
					id:1,
					checked: false,
					browserecList: [
						{
							image: '/static/uni.png',
							pic: 30.9
						},
						{
							image: '/static/uni.png',
							pic: 30.9
						},
						{
							image: '/static/uni.png',
							pic: 30.9
						}
					]
				},
				{
					nowData: '10月09日',
					id:2,
					browCheck: false,
					browserecList: [
						{
							image: '/static/uni.png',
							pic: 30.9
						},
						{
							image: '/static/uni.png',
							pic: 30.9
						},
						{
							image: '/static/uni.png',
							pic: 30.9
						}
					]
				}
			]
		};
	},
	computed:{
	
	},
	methods:{
		// 切换编辑按钮
		editBrowse(){
			this.btnSty=!this.btnSty
			this.ishowchecked=true
		},
		// 切换完成按钮
		editfinsh(){
			this.btnSty=!this.btnSty
			this.ishowchecked=false
		},
		//单选
		changeitem(item) {
		item.checked = !item.checked
		// 单选控制全选
		if (!item.checked) {
		this.isAllCheck = false
		} else {
		// 判断每一个商品是否是被选择的状态
		const browList=this.browselist.find(
		item=>item.browserecList.every(
		item => {
		return item.checked === true
		})
		)
		if (browList) {
		this.isAllCheck = true
		} else {
		this.isAllCheck = false
		}
	    }
	    },
			//全选，全不选
		selectAll(e) {
			// 当点击全选的时候如果当前的id相同则全选当前ID的内容
			console.log(e)
				this.isAllCheck = !this.isAllCheck
		
			// 全选控制单选
			if (this.isAllCheck) {
				this.browselist.find(
				item=>item.browserecList.map(item => {
						item.checked = true
				})
				)
			} else {
				this.browselist.find(
				item=>item.browserecList.map(item => {
						item.checked = false
				})
				)
			}
						},
	}
};
</script>

<style lang="scss" scoped>
.browse {
	padding: 30rpx;
	.browse_btn {
		position: fixed;
		top: 2.5%;
		right: 5%;
	}
	.browse_title {
		display: flex;
		justify-content: space-between;
		.browse_time {
			display: flex;
			align-items: center;
		}
	}
	.browse_list{
		margin-top: 18rpx;
		margin-bottom: 32rpx;
		padding: 30rpx 30rpx 0rpx 30rpx;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		.browse_rec{
			margin-bottom: 32rpx;
			.browse_rec_img{
			position: relative;
				.img_checkbox{
					position: absolute;
					right: -1px;
					top: 1px;
				}
				image{
					width: 200rpx;
					height: 200rpx;
				}
				.browse_rec_text{
					color: #FF5F42;
				}
			}
		}
	}
}
.browse_bottom{
	display: flex;
	position: fixed;
	bottom: 0;
	width:375px;
	height: 50px;
	background-color: #fff;
	.browse_choose{
		display: flex;
		align-items: center;
		margin: 16px;
	}
	button{
		width: 90px;
		height: 36px;
		left:170px;
		top: 10px;
		font-size: 16px;
		border: 1px solid #00B359;
		color: #00B359;
		background-color: #fff;
		border-radius: 10px;
		text-align: center;	
	}
}

</style>
